<template>
	<div>
		<el-form :inline="true" style="padding-top: 10px;padding-left: 5px;">
			<el-form-item label="起止日期" prop="startandend" label-width="80px">
				<el-date-picker v-model="startandend" type="daterange" value-format="yyyy-MM-dd" @change="changedate" align="right"
				 unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions2">
				</el-date-picker>
			</el-form-item>
			<el-form-item label="图例" prop="stype" label-width="80px">
				<el-select clearable v-model="stype" placeholder="请选择" style="width: 120px;" @change="changestype">
					<el-option v-for="item in stypedata" :key="item.value" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="显示图" prop="showt" label-width="80px">
				<el-select clearable v-model="showt" placeholder="请选择" style="width: 120px;" @change="changeshow">
					<el-option v-for="item in showdata" :key="item.value" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<div style="float: left;">
					<el-button type="primary" @click="querybutton">查询</el-button>
					<el-button type="primary" @click="showExport" >导出报表</el-button>
				</div>
			</el-form-item>
		</el-form>
		<table style="width: 100%;">
			<tr style="height: 100px;text-align: center;">
				<td style="background:hotpink;width: 19%;"><span style="font-size: 40px;">{{ ordersnum }}</span><br />订单数</td>
				<td style="background:#409EFF;width: 19%;"><span style="font-size: 40px;">{{ return_singular }}</span><br />退单数</td>
				<td style="background: lightseagreen;width: 19%;"><span style="font-size: 40px;">{{ order_amount }}</span><br />订货总额</td>
				<td style="background:aquamarine;width: 19%;"><span style="font-size: 40px;">{{ rerurn_amont }}</span><br />退货总额</td>
				<td style="background:cyan;width: 19%;"><span style="font-size: 40px;">{{ total_amount }}</span><br />金额合计</td>
			</tr>
		</table>
		<div id="goodschart" v-show="showchart"  style="width: 80%;height: 350%;"></div>

		<el-table :data="ordersData" showOverflowTooltip style="width: 100%" stripe border tooltip-effect="dark" height="500">
			<el-table-column prop="user_name" label="日期" show-overflow-tooltip></el-table-column>
			<el-table-column prop="订货单" label="订货单" show-overflow-tooltip></el-table-column>
			<el-table-column prop="退货单" label="退货单" show-overflow-tooltip></el-table-column>
			<el-table-column prop="订货金额" label="订货金额" show-overflow-tooltip></el-table-column>
			<el-table-column prop="退货金额" label="退货金额" show-overflow-tooltip></el-table-column>
			<el-table-column prop="小计" label="合计金额" show-overflow-tooltip></el-table-column>
		</el-table>
	</div>
</template>

<script>
	import {
		report_user_order,
		get_order_statistics
	} from '../../api/report.js'
	let echarts = require('echarts')
	// 引入柱状图组件
	require('echarts/lib/chart/bar')
	// 引入提示框和title组件
	require('echarts/lib/component/tooltip')
	require('echarts/lib/component/title')
	require('echarts/lib/component/polar')
	export default {
		data() {
			return {
				ordersData: [],
				tempstring: '',
				startandend: [],
				stype: '3',
				showt:'1',
				showchart:true,
				showdata:[
					{'label':'是','value':'1'},
					{'label':'否','value':'2'}
				],
				pickerOptions2: {},
				stypedata: [{
						'label': '订货金额',
						'value': '3'
					},
					{
						'label': '退货金额',
						'value': '4'
					}
				],
				ordersnum: 0,
				return_singular: 0,
				order_amount: 0,
				rerurn_amont: 0,
				total_amount: 0,
				legendData: [],
				seriesData: [],
				chartsorderamountData: [],
				chartsreturnamountData: [],
				order_statisticsData: []
			};
		},
		mounted() {
			this.showcharts();
		},
		methods: {
			changeshow(){
				if(this.showt=='1'){
					this.showchart = true;
				}else{
					this.showchart = false;
				}
			},
			get_reportuserorder() {
				report_user_order({
					parameter: this.startandend[0],
					parameter2: this.startandend[1]
				}).then(response => {
					this.ordersData = response;

					for (let i = 0; i < this.ordersData.length; i++) {
						this.legendData.push(this.ordersData[i].user_name);
						this.chartsorderamountData.push({
							value: this.ordersData[i].订货金额,
							name: this.ordersData[i].user_name
						});
						this.chartsreturnamountData.push({
							value: this.ordersData[i].退货金额,
							name: this.ordersData[i].user_name
						});
					}
					this.changestype();
				})
			},
			get_order_statisticsData() {
				get_order_statistics({
					parameter: this.startandend[0],
					parameter2: this.startandend[1]
				}).then(response => {
					this.order_statisticsData = response;

					this.ordersnum = this.order_statisticsData[0].订货单;
					this.return_singular = this.order_statisticsData[0].退货单;
					this.order_amount = this.order_statisticsData[0].订货金额;
					this.rerurn_amont = this.order_statisticsData[0].退货金额;
					this.total_amount = this.order_statisticsData[0].合计;
				})
			},
			changedate() {

			},
			querybutton() {
				this.ordersnum = 0;
				this.return_singular = 0;
				this.order_amount = 0;
				this.rerurn_amont = 0;
				this.total_amount = 0;
				this.legendData = [];
				this.ordersData = [];
				this.chartsorderamountData = [];
				this.chartsreturnamountData = [];
				this.get_order_statisticsData();
				this.get_reportuserorder();
			},
			changestype() {
				if (this.stype == '3') {
					this.seriesData = [];
					this.seriesData = this.chartsorderamountData.slice(0);
				} else {
					this.seriesData = [];
					this.seriesData = this.chartsreturnamountData.slice(0);
				}
				this.showcharts();
			},
			showcharts: function() {
				let chart_option = {
					toolbox: {
						feature: {
							saveAsImage: {
								pixelRatio: 2
							}
						}
					},
					title: {
						text: '客户金额占比',
						x: 'center'
					},
					tooltip: {
						trigger: 'item',
						formatter: "{a} <br/>{b} : {c} ({d}%)"
					},
					legend: {
						orient: 'vertical',
						left: 'left',
						data: this.legendData
					},
					series: [{
						name: '客户',
						type: 'pie',
						radius: '55%',
						center: ['50%', '60%'],
						data: this.seriesData,
						itemStyle: {
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				}
				let myChart = echarts.init(document.getElementById('goodschart'))
				myChart.setOption(chart_option)
			},
			showExport(){
				this.downloadLoading = true
			   require.ensure([], () => {
					const {
						export_json_to_excel
					} = require('../../vendor/Export2Excel')
					const tHeader = ['日期','订货单','退货单','订货金额','退货金额','合计金额'];
					const filterVal = ['user_name','订货单','退货单','订货金额','退货金额','小计'];
					const list = this.ordersData;
					const _data = this.formatJson(filterVal, list);
					export_json_to_excel(tHeader, _data, '客户订货报表','客户订货报表');
				
				})
			},
			formatJson(filterVal, jsonData) {
				return jsonData.map(v => filterVal.map(j => v[j]))
			},
		},
		created() {
			let date = new Date();
			let startdate = '';
			let nowdate = '';
			startdate = (date.getFullYear()+ '-' + ((date.getMonth()+1)<10?'0'+(date.getMonth()+1):(date.getMonth()+1)) + '-' + '01').toString();
			nowdate = (date.getFullYear()+ '-' + ((date.getMonth()+1)<10?'0'+(date.getMonth()+1):(date.getMonth()+1)) + '-' + ((date.getDate())<10?'0'+(date.getDate()):(date.getDate()))).toString();
			this.startandend.push(startdate);
			this.startandend.push(nowdate);
			this.querybutton();
		}
	}
</script>

<style>

</style>
